<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div id="root">
            <!-- 1 每个组件必须只有一个根元素 -->
            <button-post></button-post>
            <!-- 2 复杂组建的重构 -->
            <!-- <blog-post
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:title="post.title"
                v-bind:content="post.content"
                v-bind:publishedAt="post.publishedAt"
                v-bind:comments="post.comments"
            ></blog-post> -->
            <!-- 以上组件复杂的情况可以重构单个组件 -->
            <!-- <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post">123</blog-post> -->
        </div>

        <script type="text/javascript">
            Vue.component('button-post', {
                data: function() {
                    return {
                        count: 0,
                    };
                },
                // template: '<button @click=count++>点击了{{count}}次</button>',
                // template: '<button @click=count++>点击了{{count}}次</button><button @click=count++>点击了{{count}}次</button>',
                template: `
                    <div>
                        <button @click=count++>点击了{{count}}次</button>
                        <button @click=count++>点击了{{count}}次</button>
                    </div>
                `,
            });

            Vue.component('blog-post', {
                props: ['post'],
                template:
                    '<div class="blog-post"><h3>{{ post.title }}</h3><div v-html="post.content"></div></div>',
            });

            var vm = new Vue({
                el: '#root',
            });
        </script>
    </body>
</html>
